"use client";
import { MessageOutlined, ShareAltOutlined } from "@ant-design/icons";
import { Avatar, Button, Card, Popover, Tabs } from "antd";
import Image from "next/image";
import { useState } from "react";
import MdEditor from "../../components/MdEditor";
import MdViewer from "../../components/MdViewer";
import "./index.css";

const { Meta } = Card;

const MewCircle: React.FC = () => {
    const [hasFocus, setHasFocus] = useState(false);
    const [comment, setComment] = useState("");
    const [posts, setPosts] = useState([
        {
            id: 1,
            title: "鸡翅小弟",
            description: "每天练习，两年半定有所成。",
            avatar: "/assets/head.jpg",
            comments: 2,
        },
        {
            id: 2,
            title: "鸡翅小弟",
            description: "每天练习，两年半定有所成。",
            avatar: "/assets/head.jpg",
            comments: 5,
        },
    ]);

    const toggleFocus = (flag: boolean) => {
        setHasFocus(!flag);
    };

    const handleEditorChange = (value: string) => {
        setComment(value);
    };

    const renderPopContent = () => {
        return (
            <Tabs
                tabPosition="left"
                size="small"
                items={[
                    {
                        label: "推荐圈子",
                        key: "1",
                        children: (
                            <div className="pop-content">
                                <div className="pop-content-item">
                                    <Image
                                        src="/assets/JAVA.png"
                                        height={48}
                                        width={48}
                                        alt={"JAVA圈子"}
                                    />
                                    <span className="item-name">JAVA圈子</span>
                                </div>
                                <div className="pop-content-item">
                                    <Image
                                        src="/assets/garbage.jpg"
                                        height={48}
                                        width={48}
                                        alt={"求职圈子"}
                                    />
                                    <span className="item-name">求职圈子</span>
                                </div>
                            </div>
                        ),
                    },
                ]}
            />
        );
    };

    return (
        <div className="circle-box">
            <Card>
                <div
                    className={`top-input-card ${hasFocus ? "card-focus" : ""}`}
                >
                    <MdEditor
                        value={comment}
                        placeholder="与圈友们分享你得个人经验"
                        onChange={handleEditorChange}
                    />
                </div>
                <div className="publish-options">
                    <div className="left-box">
                        <Popover
                            placement="bottomLeft"
                            trigger="click"
                            content={renderPopContent}
                        >
                            <Button className="choose-circle" type="primary">
                                选择圈子 {">"}
                            </Button>
                        </Popover>
                    </div>
                    <div className="right-box">
                        <Button type="primary" disabled={!comment.length}>
                            发布
                        </Button>
                    </div>
                </div>
            </Card>
            {posts.map((post) => (
                <Card
                    key={post.id}
                    style={{ marginTop: "10px" }}
                    actions={[
                        <div>
                            <ShareAltOutlined />
                            <span style={{ marginLeft: 8 }}>分享</span>
                        </div>,
                        <div>
                            <MessageOutlined />
                            <span style={{ marginLeft: 8 }}>
                                {post.comments}
                            </span>
                        </div>,
                    ]}
                >
                    <Meta
                        avatar={<Avatar src={post.avatar} />}
                        title={post.title}
                        description={<MdViewer value={post.description} />}
                    />
                </Card>
            ))}
        </div>
    );
};

export default MewCircle;
